
import React,{ useRef } from 'react';

class CustomTextInput extends React.Component {
    constructor(props) {
      super(props);
      // 创建一个 ref 来存储 textInput 的 DOM 元素
      this.textInput = React.createRef();
      this.focusTextInput = this.focusTextInput.bind(this);
    }
  
    focusTextInput() {
      // 直接使用原生 API 使 text 输入框获得焦点
      // 注意：我们通过 "current" 来访问 DOM 节点
      this.textInput.current.focus();
    }
  
    render() {
      // 告诉 React 我们想把 <input> ref 关联到
      // 构造器里创建的 `textInput` 上
      return (
        <div>
          <input type="text" ref={this.textInput} />
          <button onClick={this.focusTextInput}>聚焦</button>
        </div>
      );
    }
}


class AutoFocusTextInput extends React.Component {
    constructor(props) {
      super(props);
      this.textInput = React.createRef();
    }
  
    componentDidMount() {
      this.textInput.current.focusTextInput();
      console.log('this.textInput.current',this.textInput.current)
    }
  
    render() {
      return (
        <CustomTextInput ref={this.textInput} />
      );
    }
}


function CustomTextInput1(props) {
    // 这里必须声明 textInput，这样 ref 才可以引用它
    const textInput = useRef(null);
  
    function handleClick() {
        console.log('textInput',textInput)
        textInput.current.focus();
    }
  
    return (
      <div>
        <input type="text" ref={textInput} />
        <button onClick={handleClick}>点击</button>
      </div>
    );
}

// 回调Refs
class CustomTextInput2 extends React.Component {
    constructor(props) {
        super(props);
  
        this.textInput = null;
  
          this.setTextInputRef = element => {
            this.textInput = element;
          };

        // this.setTextInputRef = React.createRef();
  
        this.focusTextInput = () => {
            // 使用原生 DOM API 使 text 输入框获得焦点
            if (this.textInput) this.textInput.focus();
            // this.setTextInputRef.current.focus();
        };
    }
  
    componentDidMount() {
      // 组件挂载后，让文本框自动获得焦点
      this.focusTextInput();
    }
  
    render() {
      // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
      // 实例上（比如 this.textInput）
      return (
        <div>
          <input type="text" ref={this.setTextInputRef} />
          <button onClick={this.focusTextInput}>聚焦</button>
        </div>
      );
    }
}


function CustomTextInput3(props) {
    return (
      <div>
        <input ref={props.inputRef} />
      </div>
    );
}

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.focusTextInput = this.focusTextInput.bind(this);
    }
    focusTextInput() {
        this.inputElement.focus();
    }
    render() {
      return (
        <div>
            <CustomTextInput3 inputRef={el => {
                this.inputElement = el
            }} />
            <button onClick={this.focusTextInput}>点击</button>
        </div>
      );
    }
}


export default function RefsDom() {
    return(
        <div>
           <h1>RefsDom</h1>
           {/* <CustomTextInput /> */}
           <AutoFocusTextInput />
           {/* <CustomTextInput1 /> */}
           {/* <CustomTextInput2 /> */}
           {/* <Parent /> */}
        </div>
    )
}